import { useState, useEffect } from 'react';
import { 
  Button, 
  Input, 
  Label, 
  Text, 
  Table, 
  TableHeader, 
  TableRow, 
  TableHead, 
  TableBody, 
  TableCell, 
  Dialog, 
  DialogContent, 
  DialogHeader, 
  DialogTitle, 
  DialogFooter,
  Select,
  Badge,
  Checkbox,
  Spinner
} from 'packages/ui-shared/src/atoms';
import { useNavigate } from 'react-router-dom';
import { useSession } from '../hooks/useSession';
import {
  Notification,
  NotificationReadStatus,
  getNotifications,
  getNotificationById,
  createNotification,
  updateNotification,
  deleteNotification,
  getReadStatuses,
  markAsRead,
  getUnreadCount
} from '../mock/notificationData';

// 定义年级选项类型
interface GradeOption {
  value: string;
  label: string;
}

// 定义班级选项类型
interface ClassOption {
  value: string;
  label: string;
}

// 模拟年级数据
const mockGrades: GradeOption[] = [
  { value: 'G001', label: '高一年级' },
  { value: 'G002', label: '高二年级' },
  { value: 'G003', label: '高三年级' }
];

// 模拟班级数据
const mockClasses: ClassOption[] = [
  { value: 'C001', label: '高一(1)班' },
  { value: 'C002', label: '高一(2)班' },
  { value: 'C003', label: '高二(1)班' },
  { value: 'C004', label: '高二(2)班' },
  { value: 'C005', label: '高三(1)班' },
  { value: 'C006', label: '高三(2)班' }
];

export default function NotificationManagementPage() {
  const navigate = useNavigate();
  const { isAuthenticated, userInfo } = useSession();
  const [notifications, setNotifications] = useState<Notification[]>([]);
  const [filteredNotifications, setFilteredNotifications] = useState<Notification[]>([]);
  const [loading, setLoading] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedLevel, setSelectedLevel] = useState<string>('');
  const [selectedStatus, setSelectedStatus] = useState<string>('');
  const [unreadCount, setUnreadCount] = useState(0);
  const [readStatuses, setReadStatuses] = useState<NotificationReadStatus[]>([]);

  // 对话框状态
  const [isCreateOpen, setIsCreateOpen] = useState(false);
  const [isEditOpen, setIsEditOpen] = useState(false);
  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
  const [isDetailOpen, setIsDetailOpen] = useState(false);
  const [isReadStatusOpen, setIsReadStatusOpen] = useState(false);
  const [currentNotification, setCurrentNotification] = useState<Notification | null>(null);
  const [notificationToDelete, setNotificationToDelete] = useState<string | null>(null);
  const [readStatusNotification, setReadStatusNotification] = useState<Notification | null>(null);
  const [notificationReadStatuses, setNotificationReadStatuses] = useState<NotificationReadStatus[]>([]);

  // 表单状态
  const [formData, setFormData] = useState({
    title: '',
    content: '',
    level: 'school' as 'school' | 'grade' | 'class',
    targetId: '',
    isImportant: false,
    status: 'draft' as 'draft' | 'published' | 'expired'
  });

  // 加载通知数据
  const loadNotifications = async () => {
    setLoading(true);
    try {
      const data = await getNotifications();
      setNotifications(data);
      filterNotifications(data, searchQuery, selectedLevel, selectedStatus);
    } catch (error) {
      console.error('加载通知失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 加载阅读状态
  const loadReadStatuses = async () => {
    try {
      if (userInfo?.id) {
        const statuses = await getReadStatuses(undefined, userInfo.id);
        setReadStatuses(statuses);
        const count = await getUnreadCount(userInfo.id);
        setUnreadCount(count);
      }
    } catch (error) {
      console.error('加载阅读状态失败:', error);
    }
  };

  // 加载特定通知的阅读状态
  const loadNotificationReadStatuses = async (notificationId: string) => {
    try {
      const statuses = await getReadStatuses(notificationId);
      setNotificationReadStatuses(statuses);
    } catch (error) {
      console.error('加载通知阅读状态失败:', error);
    }
  };

  // 过滤通知
  const filterNotifications = (data: Notification[], query: string, level: string, status: string) => {
    let filtered = [...data];
    
    if (query) {
      filtered = filtered.filter(n => 
        n.title.includes(query) || 
        n.content.includes(query) || 
        n.publisher.includes(query)
      );
    }
    
    if (level) {
      filtered = filtered.filter(n => n.level === level);
    }
    
    if (status) {
      filtered = filtered.filter(n => n.status === status);
    }
    
    setFilteredNotifications(filtered);
  };

  // 初始化数据
  useEffect(() => {
    if (!isAuthenticated) {
      navigate('/login');
      return;
    }
    loadNotifications();
    loadReadStatuses();
  }, [isAuthenticated, navigate, userInfo?.id]);

  // 处理搜索和筛选
  const handleSearch = () => {
    filterNotifications(notifications, searchQuery, selectedLevel, selectedStatus);
  };

  const handleReset = () => {
    setSearchQuery('');
    setSelectedLevel('');
    setSelectedStatus('');
    filterNotifications(notifications, '', '', '');
  };

  // 打开创建对话框
  const handleOpenCreate = () => {
    setFormData({
      title: '',
      content: '',
      level: 'school',
      targetId: '',
      isImportant: false,
      status: 'draft'
    });
    setIsCreateOpen(true);
  };

  // 打开编辑对话框
  const handleOpenEdit = (notification: Notification) => {
    setCurrentNotification(notification);
    setFormData({
      title: notification.title,
      content: notification.content,
      level: notification.level,
      targetId: notification.targetId || '',
      isImportant: notification.isImportant,
      status: notification.status
    });
    setIsEditOpen(true);
  };

  // 打开删除对话框
  const handleOpenDelete = (notificationId: string) => {
    setNotificationToDelete(notificationId);
    setIsDeleteOpen(true);
  };

  // 打开详情对话框
  const handleOpenDetail = async (notification: Notification) => {
    setCurrentNotification(notification);
    setIsDetailOpen(true);
    
    // 标记为已读
    if (userInfo?.id) {
      try {
        await markAsRead(notification.id, userInfo.id);
        loadReadStatuses();
      } catch (error) {
        console.error('标记为已读失败:', error);
      }
    }
  };

  // 打开阅读状态对话框
  const handleOpenReadStatus = async (notification: Notification) => {
    setReadStatusNotification(notification);
    await loadNotificationReadStatuses(notification.id);
    setIsReadStatusOpen(true);
  };

  // 处理表单输入变化
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  // 处理复选框变化
  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, checked } = e.target;
    setFormData(prev => ({ ...prev, [name]: checked }));
  };

  // 处理创建通知
  const handleCreate = async () => {
    try {
      await createNotification(formData);
      setIsCreateOpen(false);
      loadNotifications();
      alert('通知创建成功！');
    } catch (error) {
      console.error('创建通知失败:', error);
      alert('创建通知失败，请重试。');
    }
  };

  // 处理更新通知
  const handleUpdate = async () => {
    if (!currentNotification) return;
    
    try {
      await updateNotification(currentNotification.id, formData);
      setIsEditOpen(false);
      loadNotifications();
      alert('通知更新成功！');
    } catch (error) {
      console.error('更新通知失败:', error);
      alert('更新通知失败，请重试。');
    }
  };

  // 处理删除通知
  const handleDelete = async () => {
    if (!notificationToDelete) return;
    
    try {
      await deleteNotification(notificationToDelete);
      setIsDeleteOpen(false);
      loadNotifications();
      alert('通知删除成功！');
    } catch (error) {
      console.error('删除通知失败:', error);
      alert('删除通知失败，请重试。');
    }
  };

  // 检查通知是否已读
  const isNotificationRead = (notificationId: string): boolean => {
    return readStatuses.some(status => status.notificationId === notificationId);
  };

  // 渲染搜索和筛选区域
  const renderSearchFilter = () => (
    <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
      <div>
        <Label htmlFor="search">搜索 (标题/内容/发布者)</Label>
        <div className="flex space-x-2 mt-1">
          <Input
            id="search"
            name="searchQuery"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="输入搜索内容"
            className="flex-1"
          />
          <Button onClick={handleSearch}>搜索</Button>
        </div>
      </div>
      <div>
        <Label htmlFor="level">通知级别</Label>
        <Select
          id="level"
          value={selectedLevel}
          onChange={(e) => setSelectedLevel(e.target.value)}
          className="w-full mt-1"
        >
          <option value="">全部级别</option>
          <option value="school">全校</option>
          <option value="grade">年级</option>
          <option value="class">班级</option>
        </Select>
      </div>
      <div>
        <Label htmlFor="status">通知状态</Label>
        <Select
          id="status"
          value={selectedStatus}
          onChange={(e) => setSelectedStatus(e.target.value)}
          className="w-full mt-1"
        >
          <option value="">全部状态</option>
          <option value="published">已发布</option>
          <option value="draft">草稿</option>
          <option value="expired">已过期</option>
        </Select>
      </div>
      <div className="flex items-end">
        <Button onClick={handleReset} variant="ghost" className="w-full">重置筛选</Button>
      </div>
    </div>
  );

  // 渲染通知表格
  const renderNotificationTable = () => (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>标题</TableHead>
          <TableHead>级别</TableHead>
          <TableHead>发布者</TableHead>
          <TableHead>发布时间</TableHead>
          <TableHead>重要性</TableHead>
          <TableHead>状态</TableHead>
          <TableHead>阅读状态</TableHead>
          <TableHead>操作</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {loading ? (
          <TableRow>
            <TableCell colSpan={8} className="flex justify-center">
              <div className="flex items-center">
                <Spinner className="mr-2" />
                <Text>加载中...</Text>
              </div>
            </TableCell>
          </TableRow>
        ) : filteredNotifications.length === 0 ? (
          <TableRow>
            <TableCell colSpan={8} className="text-center">
              暂无数据
            </TableCell>
          </TableRow>
        ) : (
          filteredNotifications.map((notification) => {
            const isRead = isNotificationRead(notification.id);
            return (
              <TableRow key={notification.id}>
                <TableCell>
                  <div className="flex items-center">
                    {notification.isImportant && (
                      <Badge className="mr-2 bg-red-100 text-red-800">重要</Badge>
                    )}
                    <Text className={!isRead ? "font-bold" : ""}>
                      {notification.title}
                    </Text>
                  </div>
                </TableCell>
                <TableCell>
                  <Badge 
                    className={
                      notification.level === 'school' ? 'bg-blue-100 text-blue-800' :
                      notification.level === 'grade' ? 'bg-green-100 text-green-800' :
                      'bg-yellow-100 text-yellow-800'
                    }
                  >
                    {notification.level === 'school' ? '全校' :
                     notification.level === 'grade' ? '年级' : '班级'}
                  </Badge>
                </TableCell>
                <TableCell>{notification.publisher}</TableCell>
                <TableCell>{notification.publishTime}</TableCell>
                <TableCell>
                  <Badge 
                    className={notification.isImportant ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800'}
                  >
                    {notification.isImportant ? '重要' : '普通'}
                  </Badge>
                </TableCell>
                <TableCell>
                  <Badge 
                    className={
                      notification.status === 'published' ? 'bg-green-100 text-green-800' :
                      notification.status === 'draft' ? 'bg-gray-100 text-gray-800' :
                      'bg-red-100 text-red-800'
                    }
                  >
                    {notification.status === 'published' ? '已发布' :
                     notification.status === 'draft' ? '草稿' : '已过期'}
                  </Badge>
                </TableCell>
                <TableCell>
                  {isRead ? (
                    <Badge className="bg-gray-100 text-gray-800">已读</Badge>
                  ) : (
                    <Badge className="bg-blue-100 text-blue-800">未读</Badge>
                  )}
                </TableCell>
                <TableCell className="flex space-x-2">
                  <Button 
                    onClick={() => handleOpenDetail(notification)} 
                    variant="ghost" 
                    size="sm"
                  >
                    查看
                  </Button>
                  <Button 
                    onClick={() => handleOpenEdit(notification)} 
                    variant="ghost" 
                    size="sm"
                  >
                    编辑
                  </Button>
                  <Button 
                    onClick={() => handleOpenReadStatus(notification)} 
                    variant="ghost" 
                    size="sm"
                  >
                    阅读状态
                  </Button>
                  <Button 
                    onClick={() => handleOpenDelete(notification.id)} 
                    variant="ghost" 
                    size="sm" 
                    className="text-red-600"
                  >
                    删除
                  </Button>
                </TableCell>
              </TableRow>
            );
          })
        )}
      </TableBody>
    </Table>
  );

  // 渲染未读通知提醒
  const renderUnreadReminder = () => {
    if (unreadCount > 0) {
      return (
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <div className="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6">
              <div className="flex">
                <div className="flex-shrink-0">
                  <svg className="h-5 w-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
                  </svg>
                </div>
                <div className="ml-3">
                  <p className="text-sm text-blue-700">您有 {unreadCount} 条未读通知，点击查看。</p>
                </div>
              </div>
            </div>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>查看未读通知</AlertDialogTitle>
              <AlertDialogDescription>
                点击以下按钮查看所有未读通知。
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>稍后查看</AlertDialogCancel>
              <AlertDialogAction onClick={() => {
                const unreadNotifications = notifications.filter(n => !isNotificationRead(n.id));
                if (unreadNotifications.length > 0) {
                  handleOpenDetail(unreadNotifications[0]);
                }
              }}>
                立即查看
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      );
    }
    return null;
  };

  return (
    <div className="p-6">
      <div className="flex justify-between items-center mb-6">
        <Text className="text-2xl font-bold">通知公告管理</Text>
        <Button onClick={handleOpenCreate}>创建通知</Button>
      </div>

      {renderUnreadReminder()}
      {renderSearchFilter()}
      {renderNotificationTable()}

      {/* 创建通知对话框 */}
      <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>创建新通知</DialogTitle>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="title">标题</Label>
              <Input
                id="title"
                name="title"
                value={formData.title}
                onChange={handleInputChange}
                placeholder="请输入通知标题"
                required
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="level">通知级别</Label>
              <Select
                id="level"
                name="level"
                value={formData.level}
                onChange={handleInputChange}
                required
              >
                <option value="school">全校</option>
                <option value="grade">年级</option>
                <option value="class">班级</option>
              </Select>
            </div>
            {formData.level !== 'school' && (
              <div className="grid gap-2">
                <Label htmlFor="targetId">
                  {formData.level === 'grade' ? '选择年级' : '选择班级'}
                </Label>
                <Select
                  id="targetId"
                  name="targetId"
                  value={formData.targetId}
                  onChange={handleInputChange}
                >
                  <option value="">请选择</option>
                  {(formData.level === 'grade' ? mockGrades : mockClasses).map(option => (
                    <option key={option.value} value={option.value}>{option.label}</option>
                  ))}
                </Select>
              </div>
            )}
            <div className="grid gap-2">
              <Label htmlFor="content">通知内容</Label>
              <Textarea
                id="content"
                name="content"
                value={formData.content}
                onChange={handleInputChange}
                placeholder="请输入通知内容"
                rows={6}
                required
              />
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="isImportant"
                name="isImportant"
                checked={formData.isImportant}
                onCheckedChange={(checked) => 
                  setFormData(prev => ({ ...prev, isImportant: checked as boolean }))
                }
              />
              <Label htmlFor="isImportant">重要通知</Label>
            </div>
            <div className="grid gap-2">
              <Label htmlFor="status">状态</Label>
              <Select
                id="status"
                name="status"
                value={formData.status}
                onChange={handleInputChange}
                required
              >
                <option value="draft">草稿</option>
                <option value="published">已发布</option>
                <option value="expired">已过期</option>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <Button variant="ghost" onClick={() => setIsCreateOpen(false)}>取消</Button>
            <Button onClick={handleCreate}>创建</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 编辑通知对话框 */}
      <Dialog open={isEditOpen} onOpenChange={setIsEditOpen}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>编辑通知</DialogTitle>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="edit-title">标题</Label>
              <Input
                id="edit-title"
                name="title"
                value={formData.title}
                onChange={handleInputChange}
                placeholder="请输入通知标题"
                required
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="edit-level">通知级别</Label>
              <Select
                id="edit-level"
                name="level"
                value={formData.level}
                onChange={handleInputChange}
                required
              >
                <option value="school">全校</option>
                <option value="grade">年级</option>
                <option value="class">班级</option>
              </Select>
            </div>
            {formData.level !== 'school' && (
              <div className="grid gap-2">
                <Label htmlFor="edit-targetId">
                  {formData.level === 'grade' ? '选择年级' : '选择班级'}
                </Label>
                <Select
                  id="edit-targetId"
                  name="targetId"
                  value={formData.targetId}
                  onChange={handleInputChange}
                >
                  <option value="">请选择</option>
                  {(formData.level === 'grade' ? mockGrades : mockClasses).map(option => (
                    <option key={option.value} value={option.value}>{option.label}</option>
                  ))}
                </Select>
              </div>
            )}
            <div className="grid gap-2">
              <Label htmlFor="edit-content">通知内容</Label>
              <Textarea
                id="edit-content"
                name="content"
                value={formData.content}
                onChange={handleInputChange}
                placeholder="请输入通知内容"
                rows={6}
                required
              />
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="edit-isImportant"
                name="isImportant"
                checked={formData.isImportant}
                onCheckedChange={(checked) => 
                  setFormData(prev => ({ ...prev, isImportant: checked as boolean }))
                }
              />
              <Label htmlFor="edit-isImportant">重要通知</Label>
            </div>
            <div className="grid gap-2">
              <Label htmlFor="edit-status">状态</Label>
              <Select
                id="edit-status"
                name="status"
                value={formData.status}
                onChange={handleInputChange}
                required
              >
                <option value="draft">草稿</option>
                <option value="published">已发布</option>
                <option value="expired">已过期</option>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <Button variant="ghost" onClick={() => setIsEditOpen(false)}>取消</Button>
            <Button onClick={handleUpdate}>保存</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 删除通知对话框 */}
      <Dialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>确认删除</DialogTitle>
          </DialogHeader>
          <p>您确定要删除这条通知吗？此操作无法撤销。</p>
          <DialogFooter>
            <Button variant="ghost" onClick={() => setIsDeleteOpen(false)}>取消</Button>
            <Button className="text-red-600" onClick={handleDelete}>删除</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 查看通知详情对话框 */}
      <Dialog open={isDetailOpen} onOpenChange={setIsDetailOpen}>
        <DialogContent className="sm:max-w-[800px]">
          <DialogHeader>
            <DialogTitle>
              <div className="flex items-center">
                {currentNotification?.isImportant && (
                  <Badge className="mr-2 bg-red-100 text-red-800">重要</Badge>
                )}
                {currentNotification?.title}
              </div>
            </DialogTitle>
          </DialogHeader>
          {currentNotification && (
            <div className="space-y-4 py-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Text className="text-sm text-gray-500">通知级别</Text>
                  <Text>
                    <Badge 
                      className={
                        currentNotification.level === 'school' ? 'bg-blue-100 text-blue-800' :
                        currentNotification.level === 'grade' ? 'bg-green-100 text-green-800' :
                        'bg-yellow-100 text-yellow-800'
                      }
                    >
                      {currentNotification.level === 'school' ? '全校' :
                       currentNotification.level === 'grade' ? '年级' : '班级'}
                    </Badge>
                  </Text>
                </div>
                <div>
                  <Text className="text-sm text-gray-500">发布者</Text>
                  <Text>{currentNotification.publisher}</Text>
                </div>
                <div>
                  <Text className="text-sm text-gray-500">发布时间</Text>
                  <Text>{currentNotification.publishTime}</Text>
                </div>
                <div>
                  <Text className="text-sm text-gray-500">状态</Text>
                  <Text>
                    <Badge 
                      className={
                        currentNotification.status === 'published' ? 'bg-green-100 text-green-800' :
                        currentNotification.status === 'draft' ? 'bg-gray-100 text-gray-800' :
                        'bg-red-100 text-red-800'
                      }
                    >
                      {currentNotification.status === 'published' ? '已发布' :
                       currentNotification.status === 'draft' ? '草稿' : '已过期'}
                    </Badge>
                  </Text>
                </div>
                {currentNotification.targetId && (
                  <div className="col-span-2">
                    <Text className="text-sm text-gray-500">
                      {currentNotification.level === 'grade' ? '目标年级' : '目标班级'}
                    </Text>
                    <Text>
                      {(currentNotification.level === 'grade' ? mockGrades : mockClasses)
                        .find(option => option.value === currentNotification.targetId)?.label || 
                       currentNotification.targetId}
                    </Text>
                  </div>
                )}
              </div>
              <div>
                <Text className="text-sm text-gray-500">通知内容</Text>
                <div className="mt-2 p-4 bg-gray-50 rounded-md whitespace-pre-line">
                  <Text>{currentNotification.content}</Text>
                </div>
              </div>
            </div>
          )}
          <DialogFooter>
            <Button onClick={() => setIsDetailOpen(false)}>关闭</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 查看阅读状态对话框 */}
      <Dialog open={isReadStatusOpen} onOpenChange={setIsReadStatusOpen}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>
              通知阅读状态 - {readStatusNotification?.title}
            </DialogTitle>
          </DialogHeader>
          <div className="py-4">
            <Text className="mb-2">已阅读人数: {notificationReadStatuses.length}</Text>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>用户ID</TableHead>
                  <TableHead>阅读时间</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {notificationReadStatuses.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={2} className="text-center">
                      暂无阅读记录
                    </TableCell>
                  </TableRow>
                ) : (
                  notificationReadStatuses.map((status, index) => (
                    <TableRow key={index}>
                      <TableCell>用户{status.userId}</TableCell>
                      <TableCell>{status.readTime}</TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
          <DialogFooter>
            <Button onClick={() => setIsReadStatusOpen(false)}>关闭</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
};